<template>
  <div>
    <!-- -->
    <h3>审核管理</h3>
    <!--    <el-button type="primary" @click="select">查询属性</el-button>-->
    <div class="search">
      审核名称
      <el-input
          v-model="queryParam.name"
          style="width: 240px"
          placeholder="请输入要审核的视频名称"
          clearable
      />
      <el-button type="primary" @click="handleSearchAllPending">搜索</el-button>
    </div>

    <el-table :data="dataList" border style="width: 100%">
      <el-table-column prop="videoId" label="id" width="60" />
      <el-table-column  label="视频封面" width="120">
        <template #default="scope">
          <el-image :src="scope.row.videoCover" fit="cover" style="width:90px;height: 60px"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="videoUrl" label="视频url" width="200" />
      <el-table-column label="状态" width="100">
        <template #default="scope">
          {{scope.row.videoStatus === 1?'已通过':'待审核'}}
        </template>
      </el-table-column>
      <el-table-column  label="视频标题" width="180">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>{{ scope.row.videoTitle }}</div>
            </template>
            <template #reference>{{ scope.row.videoTitle }}</template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="videoPartitionId" label="视频分区" width="70" />
      <el-table-column prop="videoPublishTime" label="视频上线日期" width="180" />
      <el-table-column label="操作" align="center" width="auto">

        <template #default="scope">
          <el-button size="small" @click="handleExamine(scope.$index, scope.row)">
            开始审核
          </el-button>
          <el-button size="small" type="warning" @click="handleChangeStatus(scope.$index, scope.row, 1)">
            通过
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
          >
            驳回
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        v-model="dialogVisible"
        title="驳回"
        width="500"
    >
      <span>你确定要驳回id为{{targetData.videoId}}视频吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handlerConfirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>






    <div class="pagination_sign">
      <el-pagination background layout="prev, pager, next"
                     @current-change="handleCurrentChange"
                     v-model:current-page="curPage"
                     v-model:page-size="queryParam.size"
                     :total="total" />
    </div>


  </div>
</template>

<script setup>
import {ref, onMounted, reactive} from 'vue'
import {useRouter} from 'vue-router';

import {ElMessage, ElMessageBox} from 'element-plus'

const router = useRouter()


let dataList = ref([])

let total = ref(0)

let curPage = ref(1)


// 查询操作
// 查询所有待审核数据
let handleSearchAllPending = async () => {
  await getPendingData(queryParam)
}


const queryParam = reactive({
  name: '',
  page: 1,
  size: 9,
})
const getPendingData = async () => {
  // console.log(res.data);
  const res = await getPendingVideo(queryParam)
  console.log(res)
  total.value = res.data.total
  // 赋值
  dataList.value = res.data.records
}

/**
 * 页面挂载时获取数据
 */
onMounted(async () => {
  await getPendingData()
})


const handleCurrentChange = async (val) => {

  console.log(`current page: ${val}`)
  queryParam.page = val
  await getPendingData()
}
// 开始审核
const handleExamine = (index, row) => {

}



/**
 * 删除操作
 */
let targetData = ref()
const dialogVisible = ref(false)



/* 确认删除 */
const handlerConfirm = async () => {
  // targetData 是本条记录
  console.log(targetData.value);
  try {
    // 取出id
    const {videoId} = targetData.value
    console.log(videoId);
    // 根据id删除
    const res = await deleteVideoById(videoId)
    // 关闭弹出框
    dialogVisible.value = false
    console.log("删除成功");
    ElMessage.success("删除成功")
    // 获取数据
    await handleSearchAllPending()
  } catch (e) {
    ElMessage.error("删除失败：" + e.message)
  }
  /**
   * 路径：/admin/employee/{id}
   * return {code,message}
   */
  // const res = await axios.delete("/admin/employee")


  /* 没后端 */


}

const handleDelete = (row) => {
  targetData.value = row
  //删除之前，提示
  dialogVisible.value = true
  // console.log(index, row)
}


/**
 * 设置审核状态
 * @param {*} index 当前行的索引
 * @param {*} row 当前行的数据
 */
import {ElNotification} from 'element-plus'
import {
  deleteById,
  deleteVideoById,
  employeePageQuery,
  getPendingVideo,
  setFinalStatus,
  startOrStop
} from "@/api/admin-api.js";
const pendingDTO = reactive({
  videoId:0,
  videoStatus:0
})
const handleChangeStatus = async (index, row, status) => {
  try {
    console.log(index, row)
    pendingDTO.videoId = row.videoId
    pendingDTO.videoStatus = status
    await setFinalStatus(pendingDTO);
    ElMessage.success("操作成功")
    await getPendingData()
  } catch (e) {
    ElMessage.error("操作失败：" + e.message)
  }
}

</script>
<style lang="scss" scoped>
.search, {
  box-sizing: border-box;
  padding: 10px 0;
}

.add {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.pagination_sign {
  width: 100%;
  position: absolute;
  top: 560px;
  display: flex;
  justify-content: center;
}
</style>
